<template>
    <div class="admin-promotional-category">
        <div class="admin-promotional-header">用户订单列表</div>
        <div class="admin-promotional-content">
            <div>
                <el-table v-loading="loading" :data="orderInfo" style="width: 100%">
                    <el-table-column type="index"/>
                    <el-table-column prop="order_number" label="订单号" width="200" show-overflow-tooltip />
                    <el-table-column prop="username" label="用户" width="80"/>
                    <el-table-column prop="position" label="地址" width="200" show-overflow-tooltip />
                    <el-table-column prop="total" label="付费" width="80"/>
                    <el-table-column prop="express" label="快递单号" width="150" />
                    <el-table-column prop="status" label="状态" width="80"/>
                    <el-table-column prop="addtime" label="提交时间" width="200" />
                    <el-table-column label="操作">
                        <template v-slot:default="scope">
                            <el-button type="primary" round @click="getOrderDetail(scope.row.id)">查看详情</el-button>
                            <el-button type="success" round @click="forExportOrder(scope.row.id)">导出</el-button>
                            <el-button type="warning" round @click="showUpdateExpress(scope.row.id)">更新快递号</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 查看订单 -->
        <el-dialog v-model="dialogVisibleCheckOrder" title="订单详情" width="450" :before-close="handleCloseDetail">
            <el-table :data="orderDetailData" style="width: 100%">
                <el-table-column prop="product_info.title" label="产品名称" width="180" show-overflow-tooltip />
                <el-table-column prop="product_info.price" label="单价" width="80" />
                <el-table-column prop="count" label="购买数量" />
            </el-table>
        </el-dialog>
        <!-- 更新数据 -->
        <el-dialog v-model="dialogVisibleUpdate" title="快递单号" width="450" :before-close="handleCloseUpdate">
            <el-form label-width="auto" style="max-width: 400px;">
                <el-form-item label="快递单号">
                    <el-input v-model="orderExpress" />
                </el-form-item>
            </el-form>
            <div style="text-align: center; margin-top: 20px;"><el-button type="primary"
                    @click="onSubmitUpdateExpress">更新</el-button></div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Delete, Edit } from '@element-plus/icons-vue';
import { orderList, getExpress, updateExpress, orderDetail } from '../../requests/index';
import { useRouter } from 'vue-router';
import axios from "axios";
import { exportFile} from '../../utils/request';

const router = useRouter();
const loading = ref(false);
const dialogVisibleUpdate = ref(false);
const dialogVisibleCheckOrder = ref(false);
const orderId = ref(0);

const orderInfo = ref();
const orderExpress = ref();
const orderDetailData = ref();
// 获取订单列表
const getOrderList = async () => {
    const res = await orderList();
    if (res.status === 2000) {
        orderInfo.value = res.data;
    } else {
        ElMessage.error("获取订单列表失败")
    }
};
getOrderList();

// 更新快递单号
const showUpdateExpress = async (id) => {
    dialogVisibleUpdate.value = true;
    orderId.value = id;
    const res = await getExpress({ "id": id })
    if (res.status === 2000) {
        orderExpress.value = res.data;
    } else {
        ElMessage.error(res.msg);
    }
};

const handleCloseUpdate = () => {
    dialogVisibleUpdate.value = false;
    orderId.value = null;
};

const onSubmitUpdateExpress = async () => {
    const res = await updateExpress({ "id": orderId.value, "express": orderExpress.value });
    if (res.status === 2000) {
        ElMessage.success(res.msg);
    } else {
        ElMessage.error(res.msg);
    };
    handleCloseUpdate();
    getOrderList();
};
// 查看订单详情
const getOrderDetail = async (id) => {
    dialogVisibleCheckOrder.value = true;
    const res = await orderDetail({ "id": id })
    if (res.status === 2000) {
        orderDetailData.value = res.data;
    } else {
        ElMessage.error(res.msg);
    };
};
const handleCloseDetail = () =>{
    dialogVisibleCheckOrder.value = false;
}
// 导出订单
const forExportOrder = async (id) => {
    try {
        // 发起请求获取文件流
        const httpUrl = exportFile + `${id}`;
        console.log(httpUrl);
        const response = await axios.get(httpUrl, {
            responseType: 'blob' // 设置响应类型为 blob
        });
        // 创建一个 URL 对象，指向文件流
        const url = window.URL.createObjectURL(new Blob([response.data]));
        // 创建一个下载链接
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'temp.xlsx'); // 设置下载的文件名
        // 模拟点击下载链接
        document.body.appendChild(link);
        link.click();
        // 清理
        link.remove();
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.error('下载文件失败:', error);
    }
};
</script>
<style scoped>
.admin-promotional-header {
    margin-top: 20px;
    margin-left: 20px;
    height: 40px;
    line-height: 40px;
    background-color: #F9F9F9;
}

.admin-promotional-content {
    margin-top: 10px;
    margin-bottom: 50px;
    margin-left: 20px;
}

.admin-promotional-category {
    min-height: 100px;
}
</style>